<template>
  <div class="detail">
    <!-- swiper -->
    <div class="swiper">
      <swiper
        indicator-dots
        autoplay
        circular
        indicator-active-color="#ff2d49"
      >
        <block v-for="item of goodsDetail.pics" :key="item.goods_id">
          <swiper-item>
            <image :src="item.pics_big" @tap="previewImg(item.pics_big)" class="slide-image" />
          </swiper-item>
        </block>
      </swiper>
    </div>

    <!-- 商品信息 -->
    <div class="goods-detail"> 
      <div class="info">
        <div class="title">{{goodsDetail.goods_name}}</div>
        <div class="collection"><i class="iconfont icon-shoucang2"></i>收藏</div>
      </div>
      <div class="price">￥{{goodsDetail.goods_price}}</div>
      <div class="delivery">快递: 免运费</div>
    </div>

    <!-- 促销 -->
    <div class="cuxiao">
      <div class="title">促销</div>
      <div class="desc">满300减30</div>
    </div>

    <!-- wxParse 富文本解析 -->
    <div class="goods_introduce">
      <div class="title">• 商品详情 •</div>
      <!-- 富文本 解析 html -->
      <wxParse :content="article" />
    </div>

    <!-- 购物车导航栏 -->
    <div class="cart-bar">
      <div class="bar-item kefu">
        <i class="iconfont icon-lianxiwomen"></i>
        <div class="text">联系客服</div>
        <!-- 将官方按钮覆盖在客服按钮上，将其设置为透明 -->
        <button
          class="contact"
          size="defult"
          type="defult"
          form-type="submit"
          open-type="contact"
          @contact="kefu"
          >
          客服
        </button>
      </div>

      <navigator url="/pages/cart/main" open-type="switchTab" class="bar-item cart">
        <i class="iconfont icon-gouwuche"></i>
        <div class="text">购物车</div>
      </navigator>
      <div class="bar-item add-cart" @tap="addToCart">加入购物车</div>
      <div class="bar-item buy" @tap="buyNow">立即购买</div>
    </div>
  </div>
</template>

<script>
import { getGoodsDetail, wxLogin } from '@/api'
import wxParse from 'mpvue-wxparse' // 富文本解析
export default {
  components: {
    wxParse
  },
  data () {
    return {
      goodsDetail: {},
      article: '<div>wxParse解析富文本</div>'
    }
  },
  mounted () {
    let query = this.$root.$mp.query
    this.initPage(query)
  },
  methods: {
    // 预览图片
    previewImg (current) {
      let imgUrls = [];
      this.goodsDetail.pics.forEach(item => {
        imgUrls.push(item.pics_big_url)
      });
      wx.previewImage({
        current: current,
        urls: imgUrls //需要预览的图片链接列表,
      });
    },
    // 初始化页面数据
    initPage (query) {
      getGoodsDetail(query).then(res => {
        if (res.meta.status === 200) {
          this.goodsDetail = res.message
          console.log(this.goodsDetail)
          this.article = res.message.goods_introduce
        }
      })
    },
    // 加入购物车
    addToCart () {
      // 判断，尚未有数据则直接返回 false
      if (!this.goodsDetail) return false
      // 获取商品id
      let { goods_id } = this.goodsDetail;
      // 状态置为选择
      this.goodsDetail.isSelect = true;
      // 获取本地缓存的商品
      let cartList = wx.getStorageSync('cart-list') || {};
      // 判断本地中是否已存在商品
      if (cartList[goods_id]) {
        cartList[goods_id].count++;
      } else {
        this.goodsDetail.count = 1;
        cartList[goods_id] = this.goodsDetail;
      }
      // 保存
      wx.setStorageSync('cart-list', cartList);
      // 提示
      wx.showToast({
        title: '添加成功', //提示的内容,
        icon: 'success', //图标,
        duration: 1000, //延迟时间,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => {}
      });
    },
    // 立即购买
    buyNow () {

    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont {
  font-size: 40rpx;
}
.detail {
  background-color: #f4f4f4;
}
.swiper {
  background-color: #fff;
  swiper {
    height: 750rpx;
    .slide-image {
      width: 750rpx;
      height: 750rpx;
    }
  }
}
.goods-detail {
  padding: 20rpx;
  font-size: 26rpx;
  background-color: #fff;
  .info {
    display: flex;
    .title {
      flex: 1;
      font-size: 30rpx;
      padding-right: 20rpx;
      border-right: 1rpx solid #ddd;
    }
    .collection {
      width: 100rpx;
      padding: 0 20rpx;
      color: #aaa;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
    }
  }
  .price {
    margin-top: 20rpx;
    color: #ff2d49;
    font-size: 32rpx;
  }
  .delivery {
    margin-top: 20rpx;
    color: #aaa;
  }
}
.cuxiao {
  display: flex;
  margin-top: 20rpx;
  padding: 20rpx;
  color: #666;
  background-color: #fff;
  font-size: 28rpx;
  .title {
    flex: 1;
  }
  .desc {
    flex: 4;
    color: #ff2d49;
  }
}
.goods_introduce {
  margin-top: 20rpx;
  padding: 20rpx 0 100rpx;
  background-color: #fff;
  box-sizing: border-box;
  // 去除富文本标签中的图片的间距
  font-size: 0;
  .title {
    font-size: 32rpx;
    padding-bottom: 20rpx;
    color: #ff2d49;
    font-weight: bold;
    text-align: center;
  }
}
.cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  font-size: 26rpx;
  color: #888;
  .bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    height: 100rpx;
    .contact {
      position: absolute;
      width: 100%;
      // 将官方按钮覆盖在客服按钮上，将其设置为透明
      opacity: 0;
    }
  }
  .kefu {
    flex: 3;
  }
  .cart {
    flex: 3;
  }
  .add-cart {
    flex: 4;
    color: #fff;
    background-color: #fcb51c;
  }
  .buy {
    flex: 4;
    color: #fff;
    background-color: #ff2d49;
  }
}
</style>
